<template>
	<view>
		<view @touchstart="test.touchstart" @touchmove="test.touchmove" class="movable" @touchend="test.touchend"
			@tap="test.tap">
			<image src="../../static/img/drap.gif" mode=""></image>
		</view>
	</view>
</template>
<script module="test" lang="wxs">
	var tenantId = getApp().globalData.tenantId
	// console.log('tenantId', tenantId)
	var startX = 0
	var startY = 0
	var lastRight = -40
	var lastBottom = -40

	function touchstart(event, ins) {
		// 两者相等
		var touch = event.touches[0] || event.changedTouches[0]
		// 开始坐标
		startX = touch.pageX
		startY = touch.pageY
	}

	function tap() {
		// 跳转dao详情
		uni.navigateTo({
			url: "/pages/home/daoDetail?tenantId=" + tenantId
		})
	}

	function touchmove(event, ins) {
		var touch = event.touches[0] || event.changedTouches[0]
		var pageX = touch.pageX
		var pageY = touch.pageY
		var right = pageX - startX + lastRight
		var bottom = pageY - startY + lastBottom
		startX = pageX
		startY = pageY
		lastRight = right
		lastBottom = bottom
		// 禁止页面滑动
		document.body.style.overflow = 'hidden'
		document.body.addEventListener('touchstart', function(e) {
			e.preventDefault()
		}, false)
		ins.selectComponent('.movable').setStyle({
			right: -lastRight + 'px',
			bottom: -lastBottom + 'px'
		})
		return false // 不往上冒泡，相当于调用了同时调用了stopPropagation和preventDefault
	}

	function touchend(event, ins) {
		// 打开页面滑动
		document.body.style.overflow = 'scroll'
		document.removeEventListener('touchstart', function(e) {
			e.preventDefault()
		}, false)
	}

	module.exports = {
		touchstart: touchstart,
		touchmove: touchmove,
		touchend: touchend,
		tap: tap
	}
</script>

<script>
	export default {
		data() {
			return {}
		}
	}
</script>

<style lang="scss" scoped>
	.movable {
		position: absolute;
		width: 60px;
		height: 60px;
		right: 40px;
		bottom: 40px;

		image {
			width: 100%;
			height: 100%;
		}
	}
</style>
